import React, { FunctionComponent } from 'react';
import styles from './index.less';
import { IStoreProps } from '../../index';
import { Rate, Tag } from 'react-vant';

export interface IProps extends IStoreProps { };

export const ETag = [{ label: "减", textColor: '#f44336' }, { label: '折', textColor: '#1897ff' }, { label: '特', textColor: '#4fc08d' }, { label: '票', textColor: '#f60' }, { label: '保', textColor: '#4fc08d' }];

const StoreInfo: FunctionComponent<IProps> = ({ name = '', bulletin = '', score = 0, supports = [] }) => {
    return (
        <div className={styles.storeinfo}>
            <div className={styles.storeinfo_title}>{name}</div>
            <div className={styles.storeinfo_start}><Rate value={score}></Rate></div>
            <div className={styles.storeinfo_subtitle}>优惠信息</div>
            <div className={styles.storeinfo_bulletin}>
                {
                    supports?.map((item, index) => (
                        <div key={`tag${index}`} className={styles.storeinfo_bulletin_tag}>
                            <Tag color="#ffffff" textColor={ETag[item.type].textColor}>{ETag[item.type].label}</Tag>
                            <span>{item.description}</span>
                        </div>
                    ))
                }
            </div>
            <div className={styles.storeinfo_subtitle}>商家公告</div>
            <div className={styles.storeinfo_bulletin}>
                <div className={styles.storeinfo_bulletin_intro}>{bulletin}</div>
            </div>
        </div>
    )
}

export default StoreInfo;